<template>
	<!-- icons轮播 -->
	<div class="TT">
		<swiper :options="swiperOption" ref="mySwiper">
			<!-- slides -->
			<swiper-slide class="swiper-slide" v-for="(item,index) in arr" :key="index">
				<div class="icons" v-for="item2 in item" :key="item2.id">
					<div class="icons-con">
						<img :src="item2.imgurl" alt="">
					</div>
					<p>{{item2.desc}}</p>
				</div>
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				swiperOption: {
					pagination: '.swiper-pagination',

				}
			}
		},
		computed: {
			arr() {
				let arr = []
				this.icons.forEach((val, index) => {
					const num = parseInt(index / 8)
					if (!arr[num]) {
						arr[num] = []
					}
					arr[num].push(val)
				})
				return arr
			}
		},
		mounted: function() {

		},
		props:{
			icons:{
				type:Array,
			}
		}
	}
</script>

<style scoped>
	.TT{
		background: white;
		}
	.swiper-slide {
		width: 100% !important;
		padding-bottom: .25rem;
		display: flex;
		flex-flow: wrap;
	}

	.icons {
		width: 25%;
		height: .8rem;
		position: relative;
		text-align: center;
	}

	.icons-con {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: .25rem;
	}

	.icons-con img {
		width: .55rem;
	}

	.icons p {
		width: 100%;
		text-align: center;
		bottom: .03rem;
		position: absolute;
		font-size: .14rem;
	}

	.swiper>>>.swiper-pagination-bullet-active {
		/* background: white; */
		position: absolute;
		bottom: .1rem;
		background: #00AFC7;
	}
</style>
